<template>
	<view class="container">
		<v-tabs v-model="current" :tabs="tabList" :pills="false" activeColor="#00FF95" lineColor="#00FF95" bold="true"
			@change="changeTab" class="v-tabs-style"></v-tabs>
		<swiper :indicator-dots="false" :autoplay="false" :current="current" :disable-touch='true' :touchable='false' class="swiper-style">
			<template v-for="item in pageData">
				<swiper-item>
					<view class="vip_a">
						<view class="vip_aleft">
							<text>会员姓名：某某某</text>
							<text>联系电话：183 6688 9988</text>
							<text>已购套餐：198元会员套餐</text>
							<text>购买时间：2023-10-28 12:25:35</text>
							<text>剩余取液次数：48次</text>
						</view>
						<view class="vip_aright">
							<view class="vip_aimg">
								<image src="/static/image/shop/9.png" mode=""></image>
							</view>
							<text>取液记录</text>
						</view>
					</view>
				</swiper-item>
			</template>
		</swiper>
	</view>
</template>

<script>
	import $http from '@/ajax/http.js'
	export default {
		data() {
			return {
				type: 'account1',
				vipimg: '1',
				token: '',
				current: 0,
				pageData: [],
			}
		},
		computed: {
			tabList() {
				const list = this.pageData.map(p => (p.payPackage))
				return list
			}
		},
		onLoad() {
			this.token = wx.getStorageSync('token');
			this.roles = wx.getStorageSync('roles');
			this.init()
		},

		methods: {
			init() {
				$http.request({
					header: {
						Authorization: this.token,
					},
					url: '/store/index/getMemberInfoList',
					method: 'GET'
				}).then((res) => {
					console.log('res', res)
					this.pageData = this.copy(res)
				})
			},
			changeTab(index) {
				this.current = index;
			},
			copy(obj) {
				if (obj !== undefined || obj !== null) {
					return JSON.parse(JSON.stringify(obj))
				}
				return obj
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../../common/sass/all/all.scss');

	.v-tabs-style {
		width: 100%;
	}
	.swiper-style{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}
	
	
	.vip_a {
		width: 678rpx;
		height: 215rpx;
		background: #ffffff;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.vip_aleft {
			display: flex;
			flex-direction: column;
			font-size: 22rpx;
			font-weight: 400;
			color: #4C4948;
			line-height: 34rpx;
			margin-left: 43rpx;
		}
	
		.vip_aright {
			width: 172rpx;
			height: 165rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-left: 1rpx solid #c8c8c8;
	
			.vip_aimg {
				image {
					width: 86rpx;
					height: 86rpx;
				}
			}
	
			text {
				font-size: 22rpx;
				font-weight: 400;
				color: #00828C;
			}
		}
	}

	.vip_top {
		width: 670rpx;
		display: flex;
		flex-direction: row;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.vip_1 {
			display: flex;
			flex-direction: row;
			width: 187rpx;
			margin-right: 15rpx;
		}

		.vip_img {
			margin-top: -5rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}

		.account {
			width: 563rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #00FF95;
		}
	}
</style>